<template>
    <el-container>
     
   
       <el-dialog
         title="新增"
         :visible.sync="dialogVisible"
         width="30%"
       >

       <el-select v-model="id" placeholder="请选择">
        <el-option
          v-for="item in menuForm"
          :key="item.id"
          :label="item.title"
          :value="item.title">
        </el-option>
      </el-select>






           <el-input v-model="menuForm.title" autocomplete="off"></el-input>
   
         <span slot="footer" class="dialog-footer">
           <el-button @click="cancelbtn">取 消</el-button>
           <el-button type="primary" @click="successbtn">确 定</el-button>
         </span>
       </el-dialog>
       
   </el-container>
   </template>
   
   <script>
   export default {
     props:["dialogVisible","menuForm"],
       data() {
         return {
      
   
         };
       },
       methods: {
            cancelbtn(){

            },
            success(){

            }
       }
   }
   
   </script>
   <style scoped>
   .el-container{
       display: flex;
       justify-content: center;
       flex-direction: column;
   }
   .el-button{
         display: block;
       width: 160px;
       height: 50px;
       margin-bottom: 10px;
     }
     .dialog-footer{
         display: flex;
         flex-direction: row;
         justify-content:end;
         align-items: center;
         /* background-color:black; */
     }
     .dialog-footer>.el-button{
       width: 80px;
     
       height: 40px;
     }
   </style>